import React from 'react';
import { Form, Input, Button, Checkbox, Select, Spin } from 'antd';
import {useRequest} from "../.umi/plugin-request/request";
import styles from "./App.css";

const { Option } = Select;

function FreeTimeTableForm({ onSuccess }) {
  const { data, error, loading } = useRequest('http://t.onionnet.work/api/getDepartments');
  if (loading){
    return <div className={styles.centerSpinLoading}>
      <Spin />
    </div>
  }

  const onFinish = value => {
    // 表单提交
    onSuccess(value);
  }

  return (
    <Form
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 8 }}
      onFinish={onFinish}
    >
      <Form.Item
        label="部门"
        name="department_id"
        rules={[{ required: true, message: '必须选择一个部门查询' }]}
      >
        <Select >{data.map((value) => <Option value={ value.department_id }>{ value.department_college } | { value.department_name }</Option>)}</Select>
      </Form.Item>

      <Form.Item
        label="查询密码"
        name="password"
        help={'若无设置密码则可空'}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item wrapperCol={{ offset: 8, span: 16 }} >
        <Button type="primary" htmlType="submit">
          查询
        </Button>
      </Form.Item>
    </Form>
  );
}

export default FreeTimeTableForm;
